<template>
  <div class="app-container">
    <el-form :model="queryParam" ref="queryForm" :inline="true"  style="text-align: center;">
      <el-row>
        <el-form-item label="试卷名称包含：">
          <el-input v-model="queryParam.nameKeyword" clearable></el-input>
        </el-form-item>
        <el-form-item label="创建时间：" >
          <el-date-picker v-model="queryParam.createTimeArr" value-format="yyyy-MM-dd" type="daterange"
                          range-separator="至" start-placeholder="起始时间" end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
      </el-row>
      <el-form-item>
        <router-link :to="{path:'/examination-paper/examination-paper-edit'}" class="link-left">
          <el-button type="success" style="margin-right: 12px">添加</el-button>
        </router-link>
        <el-button type="primary" @click="submitForm">查询</el-button>
      </el-form-item>
    </el-form>
    <el-form :inline="true" style="text-align: center; display:  flex; flex-direction: column; justify-content: center; align-items: center;">
      <el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 92%">
        <el-table-column prop="id" label="试卷编号" width="50"/>
        <el-table-column prop="name" label="试卷名称" />
        <el-table-column prop="questionCount" label="题目总数"  width="82" />
        <el-table-column prop="score" label="试卷总分"  width="82" />
        <el-table-column prop="suggestTime" label="考试时长"  width="82" />
        <el-table-column prop="createTime" label="创建时间" width="160px"/>
        <el-table-column  label="操作" align="center"  width="300">
          <template slot-scope="{row}">
            <router-link target="_blank" :to="{path:'/answer/read2',query:{id: row.id}}">
              <el-button  type="primary" size="mini" style="margin-right: 12px">查看</el-button>
            </router-link>
            <router-link target="_blank" :to="{path:'/answer/read2',query:{id: row.id, pri: true }}">
              <el-button  type="warning" size="mini" style="margin-right: 12px">打印</el-button>
            </router-link>
            <el-button size="mini" type="success" @click="$router.push({path:'/examination-paper/examination-paper-edit',query:{id:row.id}})" style="margin-right: 8px">编辑</el-button>
            <el-popconfirm
            title="确定删除该记录吗？"
            @confirm="deletePaper(row)">
              <el-button size="mini" type="danger"  slot="reference"  class="link-left">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParam.pageIndex" :limit.sync="queryParam.pageSize"
                  @pagination="search"/>
    </el-form>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from 'vuex'
import Pagination from '@/components/Pagination'
import examPaperApi from '@/api/examPaper'

export default {
  components: { Pagination },
  data () {
    return {
      createTimeArr: [],
      paperCategoryList: [],
      queryParam: {
        nameKeyword: null,
        startTime: null,
        endTime: null,
        createTimeArr: [],
        category: null,
        pageIndex: 1,
        pageSize: 10
      },
      listLoading: true,
      createTimeArr: [],
      tableData: [],
      total: 0
    }
  },
  created () {
    this.loadAll()
    // this.initSubject()
    this.search()
  },
  methods: {

    loadAll() {
      // examPaperApi.paperCategoryFilter().then(res => {
      //   this.paperCategoryList = res.response
      // })
    },
    fuzzyqueryJob1(e, input) {
      if (this.queryParam.category !== '' && this.queryParam.category !== null && this.queryParam.category !== undefined) {
        const jobParam = { keyword: this.queryParam.category + '' }
        examPaperApi.paperCategoryFilter(jobParam).then(res => {
          this.paperCategoryList = res.response
        })
      }
    },
    createFilter(queryString) {
      return returnJobs => {
        return (
          returnJobs.toLowerCase().indexOf(queryString.toLowerCase()) !== -1 // 改为===0 就是筛选的数据只是首字匹配的列表项，需要包含输入字的所有列表项改为！==-1
        )
      }
    },
    querySearch1(queryString, cb) {
      const categorylist = this.paperCategoryList
      let results = queryString
        ? categorylist.filter(this.createFilter(queryString))
        : categorylist
      results = results.map(item => {
        return {
          value: item
        }
      })
      cb(results)
    },
    submitForm () {
      this.queryParam.pageIndex = 1
      this.search()
    },
    search () {
      this.listLoading = true
      if (this.queryParam.createTimeArr.length > 0) {
        this.queryParam.startTime = this.queryParam.createTimeArr[0]
        this.queryParam.endTime = this.queryParam.createTimeArr[1]
      }
      examPaperApi.pageList(this.queryParam).then(data => {
        const re = data.response
        this.tableData = re.list
        this.total = re.total
        this.queryParam.pageIndex = re.pageNum
        this.listLoading = false
      })
    },

    deletePaper (row) {
      let _this = this
      examPaperApi.deletePaper(row.id).then(re => {
        if (re.code === 1) {
          _this.search()
          _this.$message.success(re.message)
        } else {
          _this.$message.error(re.message)
        }
      })
    },
    subjectFormatter  (row, column, cellValue, index) {
      return this.subjectEnumFormat(cellValue)
    },
    ...mapActions('exam', { initSubject: 'initSubject' })
  },
  computed: {
    ...mapGetters('enumItem', ['enumFormat']),
    ...mapState('enumItem', {
      levelEnum: state => state.user.levelEnum
    }),
    ...mapGetters('exam', ['subjectEnumFormat']),
    ...mapState('exam', { subjects: state => state.subjects })
  }
}
</script>

<style rel="stylesheet/scss" lang='scss'>
.el-range-editor--medium .el-range-separator {
  line-height: 28px;
  font-size: 14px;
  padding-right: -2px;
  width: 24px;
}
</style>
